<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素的删除和插入</title>
		<!-- 元素的删除和插入：针对元素 增、删、改
		 qppend()   功能：在匹配元素集合中所有的内部末尾插入内容
		 perpend()  功能：在匹配元素集合中所有的内部开头插入内容
		 
		 after()   功能：在匹配元素集合中所有的外部末尾插入内容
		 before()  功能：在匹配元素集合中所有的外部末尾插入内容
		 
		 remove()  功能：使用前提 元素内容删除元素
		 empty()   功能：使用前提 元素内容清空元素
		 
		 replacewith()
		 -->
		 <script src="../js/jquery-1.11.1.js"></script>
		 <style>
			 button{
				 margin: 5px;
				 padding: 15px 8px;
				 cursor: pointer;
			 }
			 body{
				 margin: 20px;
			 }
			 #target{
				 border: 1px solid hotpink;
				 border-radius: 10px;
				 padding: 10px;
				 margin-top: 10px;
				 
			 }
		 </style>
	</head>
	<body>
		<button id="appendBtn">内容末尾插入</button>
		<button id="prependBtn">内容开头插入</button>
		<button id="afterBtn">外部末尾插入</button>
		<button id="beforeBtn">外部开头插入</button>
		<button id="removeBtn">删除元素</button>
		<button id="emptyBtn">清空元素</button>
		<button id="replaceWithBtn">替换元素</button>
		<!-- 1.目标显示区域 -->
		<div id="target">
			<p>目标元素的默认段落</p>
		</div>
		<!-- 2.替换插入元素块区域  隐藏 -->
		<div id="newElement" style="display: none;">
			<p>插入和替换的元素块段落</p>
		</div>
		
		<script>
			/*1.点击 内部末尾插入按钮 实现选框内末尾插入新元素*/
			$("#appendBtn").click(function(){
				//插入新增元素---1.1创建新元素--复制新元素：clone()
				//根据抓到新元素--复制新元素--包含原有属性和样式
				var nw=$("#newElement").clone();
				//1.2复制div加p空间元素，含原有属性----显示display：block
				nw.css("display","block");
				//1.3复制新元素并且改变属性【显示】，插入内部尾部
				$("#target").append(nw);
			});
			/*2.点击 内部开头插入按钮 实现选框内末尾插入新元素*/
			$("#prependBtn").click(function(){
				//插入新增元素---1.1创建新元素--复制新元素：clone()
				//根据抓到新元素--复制新元素--包含原有属性和样式
				var nc=$("#newElement").clone();
				//1.2复制div加p空间元素，含原有属性----显示display：block
				nc.css("display","block");
				//1.3复制新元素并且改变属性【显示】，插入内部尾部
				$("#target").prepend(nc);
			});
			/*3.*/
			$("#afterBtn").click(function(){
				var na=$("#newElement").clone();
				na.css("display","block");
				$("#target").after(na);
			});
			/*4.*/
			$("#beforeBtn").click(function(){
				var nb=$("#newElement").clone();
				nb.css({
					"display":"block",
					"width":"200px",
					"height":"200px",
					"border-radius":"50%",
					"background":"#ffaa7f",
					
				});
				$("#target").before(nb);
			});
			/*5.点击删除和清空 按钮 ：真实删除*/
			$("#removeBtn").click(function(){
				$("#target").remove();
			});
			/*6.*/
			$("#emptyBtn").click(function(){
				$("#target").empty();
			});
			/*7.*/
			$("#replaceWithBtn").click(function(){
				var c=$("#newElement").clone().css("display","block");
				$("#target").replaceWith(c);
			});
		</script>
	</body>
</html>